<!--
 * @Description: 首页基本信息公安大学改版
-->
<template>
	<div
		class="home-user-info"
		:class="{ 'home-user-info-box': processValue && !informationValue }"
	>
		<div class="task-box">
			<div ref="userInfoRef" class="task-box-content">
				<template v-for="(item, index) in userList" :key="index">
					<div
						v-if="item.show"
						class="content-item"
						:class="{
							'home-content-item-box': processValue && !informationValue,
						}"
						@click="toPath(item)"
					>
						<div class="icon-title">
							<div class="tasks-box-img">
								<!--								<a-badge-->
								<!--									:count="countData[item.count]"-->
								<!--									class="content-item-badge"-->
								<!--								>-->
								<!--									&lt;!&ndash;								<img&ndash;&gt;-->
								<!--									&lt;!&ndash;									:src="path.getFullPath('/icon/' + item.img + '.svg')"&ndash;&gt;-->
								<!--									&lt;!&ndash;									alt="avatar"&ndash;&gt;-->
								<!--									&lt;!&ndash;								/>&ndash;&gt;-->
								<!--									-->
								<!--								</a-badge>-->
								<img
									v-if="item.text === '我的待办'"
									:src="path.getFullPath('/icon/wddb.svg')"
									alt="avatar"
								/>
								<img
									v-if="item.text === '我的申请'"
									:src="path.getFullPath('/icon/wdsq.svg')"
									alt="avatar"
								/>
								<img
									v-if="item.text === '未读知会'"
									:src="path.getFullPath('/icon/wdzh.svg')"
									alt="avatar"
								/>
								<img
									v-if="item.text === '预计待办'"
									:src="path.getFullPath('/icon/dbtx.svg')"
									alt="avatar"
								/>
								<div class="tasks-box-text">
									<EllipsisTooltip :title="item.text" />
									<i class="low-code iconjiantou text-icon"></i>
								</div>
							</div>
						</div>

						<div v-if="item.text === '我的申请'" class="user-info-number">
							<div class="up-title">
                <div class="item">
                  <i
                    class="low-code icon-sousuo item-icon"
                    style="color: rgb(255, 166, 101)"
                  >
                  </i>
                  <span>审批中</span>
                  <span class="user-info-number up-title text-icon">{{
                      countData.approve_application_count
                    }}</span>
                </div>
							</div>

							<div class="down-title">
                <div class="item">
								<i
									class="low-code icon-sousuo item-icon"
									style="color: #dee0e3"
								>
								</i>
								<span>已完成</span>
								<span class="user-info-number down-title text-icon">{{
									finishCountData.complete_count
								}}</span>
                </div>
							</div>
						</div>

						<div v-if="item.text === '我的待办'" class="user-info-number">
							<div class="up-title">
                <div class="item">
								<i
									class="low-code icon-sousuo item-icon"
									style="color: rgb(255, 166, 101)"
								>
								</i>
								<span>待办事项</span>
								<span class="user-info-number up-title text-icon">{{
									countData.todo_task_count
								}}</span>
                </div>
							</div>

							<div class="down-title">
                <div class="item">
								<i
									class="low-code icon-sousuo item-icon"
									style="color: #dee0e3"
								>
								</i>
								<span>已办事项</span>
								<span class="user-info-number down-title text-icon">{{
									finishDealTotal
								}}</span>
                </div>
							</div>
						</div>

						<div v-if="item.text === '未读知会'" class="user-info-number">
							<div class="up-title">
                <div class="item">
								<i
									class="low-code icon-sousuo item-icon"
									style="color: rgb(255, 166, 101)"
								>
								</i>
								<span>未读</span>
								<span class="user-info-number up-title text-icon">{{
									countData.un_read_notice_count+ userNotifyNoReadTotal
								}}</span>
                </div>
							</div>

							<div class="down-title">
                <div class="item">
								<i
									class="low-code icon-sousuo item-icon"
									style="color: #dee0e3"
								>
								</i>
								<span>已读</span>
								<span class="user-info-number down-title text-icon">{{
									countData.read_notice_count + userNotifyReadTotal
								}}</span>
                </div>
							</div>
						</div>

						<div v-if="item.text === '预计待办'" class="user-info-number">
							<div class="up-title">
                <div class="item">
								<i
									class="low-code icon-sousuo item-icon"
									style="color: rgb(255, 166, 101)"
								>
								</i>
								<span>数量</span>
								<span class="user-info-number up-title text-icon">{{
									countData.expect_task_count
								}}</span>
                </div>
							</div>
						</div>
					</div>
				</template>
			</div>
		</div>
		<div v-show="showLeft" class="task-box-left" @click="transformHandle">
			<i class="low-code iconleft"></i>
		</div>
		<div v-show="showRight" class="task-box-right" @click="transformHandle">
			<i class="low-code iconxiangyou"></i>
		</div>
	</div>
</template>
<script setup lang="ts">
import { computed, onMounted, ref, unref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import EllipsisTooltip from '@/entry_desktop/components/EllipsisTooltip'
import { iframePostMessage, isInnerIframePage } from '@/utils/tabInnerPage'

import { path } from '@/utils'
import { userInfoList } from './constant'
import { client } from '@/utils'
import useModel from './useModel'
import './index.less'
const appLauncher = computed(
	() => store.state.tenant?.tenant_auth?.app_launcher === 1
)
const store = useStore()
const processValue = computed(() => store.state.tenant.process_quick_entry)
const informationValue = computed(() => store.state.tenant.information_module)
const userInfo = computed(() => store.state.userInfo)

const {
	countData,
	fetchTaskCount,
	finishCountData,
	finishCount,
	finishDealCountData,
	finishDealCount,
  userNotifyNoReadTotal,
  userNotifyReadTotal,
  fetchUserNotify,
} = useModel()
const finishDealTotal = ref(0)
const userInfoRef = ref()
const isShow = ref(true)
const tenantDetail = computed(() => store.state.tenant)
const userList = ref()
const userNotifyRead = ref(0)
const userNotifyNoRead = ref(0)
watch(
	() => countData.value,
	value => {
		userList.value = userInfoList.map(item => {
			if (
				item.name === 'ExpactTask' &&
				!tenantDetail.value.tenant_auth?.forecase_task
			) {
				item.show = false
			}
			if (item.name === 'AgentTodo' && !value[item.count]) {
				item.show = false
			}
			if (item.name === 'AgentNotice' && !value[item.count]) {
				item.show = false
			}
			return item
		})
	},
	{
		deep: true,
	}
)


watch(
	() => finishDealCountData.value,
	(val: any) => {
		for (let i = 0; i < val.length; i++) {
			finishDealTotal.value += val[i].count
		}
	}
)

const showRight = computed(
	() =>
		(unref(countData)?.agent_todo_task_count ||
			unref(countData)?.agent_un_read_notice_count) &&
		unref(isShow) &&
		tenantDetail.value.tenant_auth?.forecase_task
)
const showLeft = computed(
	() =>
		(unref(countData)?.agent_todo_task_count ||
			unref(countData)?.agent_un_read_notice_count) &&
		!unref(isShow) &&
		tenantDetail.value.tenant_auth?.forecase_task
)

const transformHandle = () => {
	userInfoRef.value.style.left = isShow.value
		? processValue.value && !informationValue.value
			? '-310px'
			: '-446px'
		: '0'
	isShow.value = !isShow.value
}

const router = useRouter()
const toPath = (item: any) => {
	if (isInnerIframePage()) {
		iframePostMessage(
			{
				type: 'processcenter',
				sapp_type: 'processcenter',
				processcenter_name: item.name,
			},
			'appCenter'
		)
	} else {
		router.push({
			name: 'process_center',
			params: {
				name: item.name,
			},
		})
	}

	localStorage.setItem('activeProcessKey', item.name)
}


onMounted(() => {
	fetchTaskCount()
	finishDealCount()
	finishCount('', '', 'complete', '', 'desc', '')
  fetchUserNotify(1,1,userInfo.value.id, 0)
  fetchUserNotify(1,1,userInfo.value.id,1)
})
</script>
